<template>
	<view>
		<view class="searchBox">
			<view class="dingwei">
				<view class="title">
					<span class="closeText" @click="close()">取消</span>
					<span style="color: red;" @click="allCheck">{{allChecked?'取消全选':'全选'}}</span>
					<span class="submuitText" @click="submitCheck()">确定</span>
				</view>
				<!-- <view class="top"><input type="text" v-model="searchText" placeholder="请输入关键字" @input="change()" /></view> -->

			</view>

			<view class="listBox">
				<view class="nocheck" v-if="realList.length == 0">
					暂无选项
				</view>
				<view class="list" v-for="(item, index) in realList" :key="index" @click="changeChecked(item)">
					<image style="height: auto;" v-if="item.checked" src="../static/images/giuxuan.png" mode="widthFix">
					</image>
					<span>{{ item.name }}</span>
					<span style="font-size: 25rpx;margin-left: 5rpx; " v-if="item.phone">（{{ item.phone }}）</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		watch: {
			//haveTask 为接收参数的名称
			list: {
				handler(newValue) {
					this.init(newValue); //监听到数据变化执行方法
				},
				deep: true // 深度监听父组件传过来对象变化
			}
		},
		data() {
			return {
				searchText: '',
				oldlist: [],
				realList: [],
				allChecked:false
			};
		},

		created() {
			this.realList = this.oldlist = this.list;
			console.log('this.realList');
			console.log(this.realList);
		},
		methods: {
			
			allCheck() {
				this.allChecked = !this.allChecked

				if (this.allChecked) {
					this.realList.forEach((item) => {
						item.checked = true
					})
				} else {
					this.realList.forEach((item) => {
						item.checked = false
					})
				}
				this.$forceUpdate()
			},
			changeChecked(item) {
				item.checked = !item.checked
				
				let isCheckAll = true
				this.realList.forEach(item => {
					if (!item.checked) {
						isCheckAll = false
					}
				})
				this.allChecked = isCheckAll
				this.$forceUpdate()
				this.$forceUpdate()
			},
			submitCheck() {
				let arr = []
				this.realList.forEach((item => {
					if (item.checked) {
						arr.push(item)
					}
				}))

				this.$emit('checkedUser', arr)
				console.log(arr)
			},
			close() {
				this.$emit('closeDia')
			},
			init(e) {
				console.log(e);
				this.realList = this.oldlist = e;
			},
			change() {
				if (this.searchText == '') {
					this.realList = this.oldlist;
				} else {
					var newData = this.oldlist.filter(item => {
						if ((item.name + '').indexOf(this.searchText) > -1) {
							//indexOf方法中如果xxx.indexOf("")返回值为0
							return item;
						}
						return newData;
					});

					this.realList = newData;
				}
			},
			checkPicker(index) {
				let data = this.realList[index];
				this.$emit('checkPicker', data);
			}
		}
	};
</script>

<style scoped lang="scss">
	.searchBox {
		background-color: #fff;
		height: 700rpx;
		overflow-y: scroll;
		width: 100%;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.dingwei {
			position: sticky;
			top: 0;
			z-index: 10;
			background-color: #fff;
			padding-bottom: 15rpx;
		}

		.title {
			padding: 30rpx 0;
			text-align: center;
			font-weight: 500;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			position: relative;

			.submuitText {
				position: absolute;
				right: 30rpx;
				z-index: 10;
				color: #de4849;
			}

			.closeText {
				position: absolute;
				left: 30rpx;
				z-index: 10;
				color: #909193;
			}
		}

		.top {
			input {
				background-color: #f3f3f3;
				padding: 20rpx 40rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				width: 90%;
				height: 80rpx;
				margin: 0 auto;
			}
		}

		.listBox {
			.nocheck {
				text-align: center;
				margin-top: 50rpx;
				font-size: 28rpx;
			}

			.allCheck {
				padding-left: 30rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				color: #ff0000;
				margin-bottom: 20rpx;
			}

			.list {
				height: 80rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f5f5f5;
				padding: 0 30rpx;
				font-size: 30rpx;
				position: relative;

				image {
					position: absolute;
					width: 40rpx;
					right: 30rpx;
				}
			}

			.list:nth-child(1) {
				border-top: 1px solid #f5f5f5;
			}
		}
	}
</style>